<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" style="width: 80px;" @click="loadWhiteModel" size="small">渲染白模</el-button>
          <div  v-if="isShowProperty"
              style="margin-top: 10px;color:red;background-color: #ffffff;padding:10px 30px;border-radius: 10px;"
          >当前选择：{{ properties }}
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>

import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {onMounted, ref} from "vue";
import {renderWhiteModel} from "@/widgets/modelExample_cesium/common/loadLayers";
import mouseEvent from "@/widgets/modelExample_cesium/common/event/MouseEvent";
import AceEditor from "@/components/aceEditor.vue";
import cityHouseJson from '@/assets/data/city_house.json'

const properties = ref('');
//是否展示属性提示框
const  isShowProperty=ref(false);
const htmlStr = ref(`
 <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" style="width: 80px;" @click="loadWhiteModel" size="small">渲染白模</el-button>
          <div  v-if="isShowProperty"
              style="margin-top: 10px;color:red;background-color: #ffffff;padding:10px 30px;border-radius: 10px;"
          >当前选择：{{ properties }}
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>

import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {onMounted, ref} from "vue";
import {renderWhiteModel} from "@/widgets/modelExample_cesium/common/loadLayers";
import mouseEvent from "@/widgets/modelExample_cesium/common/event/MouseEvent";
import cityHouseJson from '@/assets/data/city_house.json'

const properties = ref('');
//是否展示属性提示框
const  isShowProperty=ref(false);

const cViewer = ref();

const loadWhiteModel=()=>{
  isShowProperty.value=true;
  renderWhiteModel(cViewer.value,cityHouseJson.features,true);
  mouseEvent.add(cViewer.value, 'LEFT_CLICK', [], (object: any) => {
    properties.value = object.entity.name;
  });
}
onMounted(() => {
  cViewer.value = initMap("load4490_box");
})

<\/script>

<style lang="scss" scoped>

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: auto;
  top: 100px;
  height: 60px;
  z-index: 10;

  .inner_content_common {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

}

</style>
`);

const tsStr = ref(`
import * as Cesium from "cesium";
/**
 * 添加白模
 * @param jsonArr
 * @param viewer
 * @param isZoom 是否定位
 */
const renderWhiteModel= (viewer:any,dataArr:any,isZoom:boolean=false)=> {
    let json = {
        'type': 'FeatureCollection',
        'features': dataArr
    }
    let entities
    let promise = Cesium.GeoJsonDataSource.load(json, { clampToGround: true })
    promise.then(function (dataSource:any) {
        if(isZoom){
            viewer.zoomTo(dataSource);
        }
        viewer.dataSources.add(dataSource);
        entities = dataSource.entities.values
        for (let i = 0; i < entities.length; i++) {
            let entity = entities[i]
            let lvalue = entity.properties._gd._value*5;
            let color = '#ffffff';
            entity.polygon.name = entity.properties._name._value
            entity.polygon.fill = true
            entity.polygon.material = Cesium.Color.fromCssColorString(color)
            entity.polygon.extrudedHeight = lvalue
            entity.polygon.outline = false
            entity.polygon.outlineColor = Cesium.Color.fromCssColorString(color)
        }
    })
}

export {
    renderWhiteModel
}

`);

const cViewer = ref();

const loadWhiteModel=()=>{
  isShowProperty.value=true;
  renderWhiteModel(cViewer.value,cityHouseJson.features,true);
  mouseEvent.add(cViewer.value, 'LEFT_CLICK', [], (object: any) => {
    properties.value = object.entity.name;
  });
}
onMounted(() => {
  cViewer.value = initMap("load4490_box");
})

</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: auto;
  top: 100px;
  height: 60px;
  z-index: 10;

  .inner_content_common {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

}

</style>
